<template>
  <div class="deserve">
    <!-- 头部 -->
    <!-- <div class="deserve-fixd">
      <van-row class="deserve-header">
        <van-col span="8" class="header-left">
          <router-link to="/home">
            <van-icon class="wap-home-o" name="wap-home-o" />
          </router-link>
        </van-col>
        <van-col span="8" class="header-center">
          值得买
        </van-col>
        <van-col span="8" class="header-right">
          <router-link to="/search">
            <van-icon class="search" name="search" />
          </router-link>
          <router-link to="/cart">
            <van-icon class="cart-o" name="cart-o" />
          </router-link>
        </van-col>
      </van-row>
    </div> -->
    <!-- 主内容 -->
    <!-- 轮播图 -->
    <div class="deserve-content">
      <!-- 主体轮播 -->
      <div class="deserve-swiper">
        <!-- 背景图和文字 -->
        <div class="swiper-header">
          <img class="swiper-title" src="http://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="">
          <div class="swiper-watchword">严选好物&nbsp;用心生活</div>
          <img class="swiper-bg" src="http://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView">
        </div>
        <!-- 轮播图 -->
        <div class="swiper-my-swipe">
          <van-swipe class="my-swipe" indicator-color="#dd1a21" :width="88.75" :loop="false">
            <van-swipe-item v-for="(navWap, index) in navWapList" :key="index">
              <div v-for="nav in navWap" :key="nav.id">
                <img :src="nav.picUrl">
                <div class="title">{{ nav.mainTitle }}</div>
                <div class="small-title">{{ nav.viceTitle }}</div>
              </div>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
    <!-- 瀑布流 -->
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="getTopicsList">
      <div class="deserve-topic" v-masonry transition-duration="0" item-selector=".topic" gutter="10">
        <div v-masonry-tile class="topic" v-for="(pic, index) in topicList">
          <div class="content">
            <img class="content-bigImg" :src="pic.picUrl">
            <div class="content-title">{{ pic.title }}</div>
            <div class="content-info">
              <img class="info-smallImg" :src="pic.avatar">
              <span class="info-user">{{ pic.nickname }}</span>
              <span class="info-read">
                <van-icon class="eye-o" name="eye-o" />
                <span class="info-number">{{ formatNumber(pic.readCount) }}</span>
              </span>
            </div>
          </div>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  name: 'Deserve'
}
</script>
<script setup>
import { onMounted, ref, computed } from 'vue'
import { reqGetDeserveNavWapData, reqGetDeserveTopicData } from '../../api/deserve'
import { formatNumber } from '../../hooks'
const navWapList = ref([])
const page = ref(1)
const size = ref(1)
const topicList = ref([])
const loading = ref(false)
const finished = ref(false)
// 1.一上来就加载
onMounted(async () => {
  let navWapData = await reqGetDeserveNavWapData()
  navWapList.value = saveArray(navWapData.navList)
  getTopicsList()
})
// 2.切割数组并存储到新的数组中
const saveArray = (array) => {
  let index = 0
  let newArray = [];
  let navArray = []
  while (index < array.length) {
    newArray.push(array.slice(index, index += array.length / 2));
  }
  for (let i = 0; i < newArray[0].length; i++) {
    navArray.push([newArray[0][i], newArray[1][i]]);
  }
  return navArray
}
// 3.请求瀑布流数据
const getTopicsList = async () => {
  let topicData = await reqGetDeserveTopicData(page.value, size.value)
  topicList.value = topicList.value.concat(topicData.result[0].topics)
  loading.value = false
  page.value += 1
}
// 4.计算阅读量



</script>

<style lang="less" scoped>
.deserve {
  background-color: #eee;
}

// 头部
.deserve-fixd {
  position: fixed;
  z-index: 999;

  .deserve-header {
    width: 375px;
    height: 50px;
    padding: 10px;

    box-sizing: border-box;
    align-items: center;
    background-color: #fff;
    font-size: 25px;
    a{
      color: #000;
    }

    .header-center {
      font-size: 16px;
      text-align: center;
    }

    .header-right {
      text-align: right;

      .cart-o {
        margin-left: 10px;
      }
    }


  }
}


// 主内容
.deserve-content {
  background-color: #eee;
  // height: 800px;
  margin: 0 auto;
  // padding-top: 50px;

  // 轮播图
  .deserve-swiper {
    position: relative;
    height: 380px;

    .swiper-header {
      position: absolute;

      .swiper-title {
        width: 65px;
        height: 35px;
        position: absolute;
        z-index: 1;
        top: 35px;
        left: 5px;
      }

      .swiper-bg {
        width: 375px;
        height: 259px;
        position: absolute;
        left: 0;
        top: 0;
      }

      .swiper-watchword {
        color: #fff;
        font-size: 15px;
        position: absolute;
        z-index: 1;
        width: 200px;
        left: 74px;
        top: 44px;
        white-space: nowarp;
      }
    }

    .swiper-my-swipe {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 0);
      margin: 0 auto;
      width: 96%;
      background-color: #fff;
      border-radius: 20px;

      .my-swipe {
        width: 100%;

        .van-swipe-item {
          box-sizing: border-box;
          padding: 20px 10px;
          text-align: center;

          img {
            width: 60px;
            height: 60px;
          }

          .title {
            font-size: 13px;
            font-weight: 700;
            margin: 4px 0;
          }

          .small-title {
            font-size: 10px;
            color: #999;
            margin-bottom: 10px;
          }
        }

        :deep(.van-swipe__indicator) {
          border-radius: 0;
          width: 20px;
          height: 2px;
          margin: 0;
          background-color: #888;
        }

        :deep(.van-swipe__indicator:nth-of-type(5)) {
          display: none;
        }

        :deep(.van-swipe__indicator:nth-of-type(6)) {
          display: none;
        }

        :deep(.van-swipe__indicator:nth-of-type(7)) {
          display: none;
        }
      }
    }
  }


}

// 瀑布流
.deserve-topic {
  margin-top: 10px;
  padding: 0 10px;

  .topic {
    width: 172px;
    padding-bottom: 10px;

    .content {
      background-color: #fff;
      border-radius: 20px;

      .content-bigImg {
        border-radius: 20px 20px 0 0;
        width: 172px;
      }

      .content-title {
        font-size: 14px;
        margin-left: 5px;
      }

      .content-info {
        padding: 8px;
        display: flex;
        align-items: center;


        .info-smallImg {
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }

        .info-user {
          margin-left: 5px;
          font-size: 12px;
          flex: 1;
          color: #7f7f7f;
        }

        .info-read {
          display: flex;
          align-items: center;
          color: #7f7f7f;

          .eye-o {
            font-size: 14px;
          }

          .info-number {
            margin-left: 2px;
            font-size: 12px;
          }
        }
      }

    }
  }
}
</style>